import { FormItem, NumberPicker, Select } from '@formily/antd'
import { Field } from '@formily/react'
import React from 'react'
import { useT } from '@designable/event-system'
import { Radio, Space } from 'antd'

export const GoodsExchangeRestrictions = (props: any) => {
  const $t = useT()

  return (
    <Field
      name={['productExchangeRuleInfo', 'exchangeLimit']}
      initialValue={0}
      title={$t('兑换限制')}
      decorator={[FormItem, { rules: [{ required: true }] }]}
      component={[
        Radio.Group,
        {
          defaultValue: 0,
        },
      ]}
    >
      <Radio value={0}>{$t('不限制每人可兑换数量')}</Radio>
      <Space style={{ width: '100%', marginTop: 20 }} align="baseline">
        <Radio value={1}>{$t('终身限购')}</Radio>
        <Field
          name={['productExchangeRuleInfo', 'exchangeLimitLife']}
          basePath={[]}
          reactions={(field) => {
            const dep = field
              .query('productExchangeRuleInfo.exchangeLimit')
              .value()
            field.required = dep === 1
          }}
          decorator={[FormItem]}
          component={[
            NumberPicker,
            {
              min: 1,
              width: 'md',
            },
          ]}
        />
        <div style={{ fontSize: 14 }}>{$t('次')}</div>
      </Space>
      <Space style={{ width: '100%' }} align="baseline">
        <Radio value={2}>{$t('每人每')}</Radio>
        <Field
          name={['productExchangeRuleInfo', 'exchangeLimitUnit']}
          basePath={[]}
          reactions={(field) => {
            const dep = field
              .query('productExchangeRuleInfo.exchangeLimit')
              .value()
            field.required = dep === 2
          }}
          decorator={[FormItem]}
          component={[
            Select,
            {
              style: { width: 120 },
              options: [
                { label: $t('天'), value: 1 },
                { label: $t('月'), value: 2 },
                { label: $t('年'), value: 3 },
                { label: $t('季'), value: 4 },
              ],
            },
          ]}
        ></Field>

        <div style={{ fontSize: 14 }}>{$t('限购')}</div>
        <Field
          name={['productExchangeRuleInfo', 'exchangeLimitNum']}
          basePath={[]}
          reactions={(field) => {
            const dep = field
              .query('productExchangeRuleInfo.exchangeLimit')
              .value()
            field.required = dep === 2
          }}
          decorator={[FormItem]}
          component={[
            NumberPicker,
            {
              min: 1,
              width: 'md',
              precision: 0,
            },
          ]}
        />
        <div style={{ fontSize: 14 }}>{$t('次')}</div>
      </Space>
    </Field>
  )
}
